<template>
	<view class="index">
		<view class="top-wrapper">
			<view class="user-info">
				<!-- <uni-icons type="contact" class="icon" size="26" color="#222"></uni-icons> -->
				<view class="name">
					{{ form.supplierName }}
				</view>
				<uni-icons type="phone" v-if="form.serviceTel" size="18" color="#666"></uni-icons>
				<view class="tel" @click.stop="callPhone(form.supplierTel)">
					{{ form.serviceTel }}
				</view>
			</view>
			<view class="region">
				{{ form.businessAddress }}
			</view>
		</view>
		<view class="item" v-for="(item,index) in list" :key="index">
			<quotationItem :source="item" :index="form.index" @select="select" @changePrice="changePrice">
			</quotationItem>
		</view>


		<view v-if="form.index == 0 && $permissions.verify('app:product:take-off-batch')" class="bottom-wrapper">
			<uni-icons v-if="selected" @tap="selectAll" type="checkbox-filled" class="icon" size="26"
				color="#555BFF"></uni-icons>
			<uni-icons v-else type="circle" @tap="selectAll" class="icon" size="26" color="#999999"></uni-icons>
			<view class="select-text" @tap="selectAll">
				已选择：{{ waitReport.length }}条
			</view>
			<view class="btn" @click="takeOff">
				商品下架
			</view>
		</view>
		<view v-else-if="form.index == 1 && $permissions.verify('app:price:examine')" class="bottom-wrapper">
			<uni-icons v-if="selected" @tap="selectAll" type="checkbox-filled" class="icon" size="26"
				color="#555BFF"></uni-icons>
			<uni-icons v-else type="circle" @tap="selectAll" class="icon" size="26" color="#999999"></uni-icons>
			<view class="select-text" @tap="selectAll">
				已选择：{{ waitAudit.length }}条
			</view>
			<view class="btn" @click="aduit(0)">
				驳回
			</view>
			<view class="btn primary" @click="aduit(1)">
				通过
			</view>
		</view>

		<uni-popup ref="pricePopup">
			<view class="price-popup-wrapper">
				<view class="title-wrapper">
					调整价格
				</view>
				<view class="form-item">
					<view class="label">
						价格
					</view>
					<view class="input-wrapper">
						<input type="digit" focus v-model="price" placeholder="请输入价格" class="input">
					</view>
				</view>
				<view class="btn-wrapper">
					<view class="btn cancel" @click="close">
						取消
					</view>
					<view class="btn" @click="submit">
						确定
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popup">
			<view class="popup-wrapper">
				<view class="popup-title-wrapper">
					<text class="title">驳回申请</text>
				</view>
				<view class="popup-content-wrapper">
					<textarea class="textarea" focus v-model="reason" placeholder="请输入驳回原因" maxlength="50"></textarea>
				</view>
				<view class="popup-btn-wrapper">
					<view class="btn" @click="closeReject">
						取消
					</view>
					<view class="btn primary" @click="confirmReject">
						驳回申请
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import quotationItem from '@/subPage_quotation/quotationItem.vue'
	export default {
		data() {
			return {
				form: {},
				list: [],
				reason: '',
				waitAudit: [],
				waitReport: [],
				selected: false,
				price: '',
				selectItem: {}
			}
		},
		onLoad(option) {
			this.form = JSON.parse(option.params)
			this.getData()
		},
		methods: {
			callPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			async getData() {
				let url = "/adm/product/waitReportList";
				if (this.form.index == 1) {
					url = "/adm/product/waitAuditList";
				}
				const data = await this.$api.post(url, {
					supplierId: this.form.id,
					pageNum: 1,
					pageSize: 100,
				})
				if (data.code === 200) {
					data.data.records.forEach(item => {
						item.selected = false;
						let price = item.examinePrice || item.currentPrice;
						let prePrice = item.lastExaminePrice || item.sellingPrice;
						item.unitPrice = (price / item.netWeight).toFixed(2)
						item.preUnitPrice = (prePrice / item.netWeight).toFixed(2)
						if (this.form.index == 1 && item.priceLimit && (item.unitPrice > item.priceLimit
								.maxPrice || item
								.unitPrice < item.priceLimit.minPrice)) {
							item.warning = true;
							item.warningText = item.priceLimit.minPrice + '~' +
								item.priceLimit.maxPrice;
							item.warningText2 = parseFloat((item.priceLimit.minPrice * item.netWeight).toFixed(
									2)) + '~' +
								parseFloat((item.priceLimit.maxPrice * item.netWeight).toFixed(2));
							item.warningType = item.unitPrice > item.priceLimit.maxPrice ? 'max' : 'min';
						}
					})
					this.list = data.data.records;
				}
			},
			select(id) {
				const array = this.list.filter(item => {
					if (item.id == id) {
						item.selected = !item.selected;
					}
					return item.selected
				})
				if (this.form.index == 0) {
					this.waitReport = array
				} else {
					this.waitAudit = array
				}
				this.selected = array.length === this.list.length;
			},
			selectAll() {
				this.selected = !this.selected;
				this.list.forEach(item => {
					item.selected = this.selected;
				})
				this.waitReport = [];
				this.waitAudit = [];
				if (this.form.index == 0 && this.selected) {
					this.waitReport = this.list;
				} else if (this.form.index == 1 && this.selected) {
					this.waitAudit = this.list;
				}
			},
			aduit(type) {
				if (!this.waitAudit.length) {
					uni.showToast({
						title: '请至少选择一条数据进行审核',
						icon: 'none'
					})
					return
				}
				if (type === 0) { //驳回
					this.reason = '';
					this.$refs.popup.open('center');
				} else { //审核通过
					let content = "本操作确认以后，该商品将按照以上价格进行上架售卖。如果不确定请选择取消。";
					let index = this.waitAudit.findIndex(item => {
						return item.warning
					})
					if (index > -1) {
						content = "当前有商品申请价格不在警示价格范围内，本操作确认以后，该商品将按照以上价格进行上架售卖。如果不确定请选择取消。"
					}
					this.$showModal({
						title: '通过报价',
						content: content,
						confirmText: '同意',
						cancelText: '取消',
						success: async (res) => {
							if (res.confirm) {
								this.confirm(1)
							}
						}
					})
				}
			},
			async confirm(status) {
				const ids = this.waitAudit.map(item => {
					return item.currentPriceSupplyId
				})
				const params = {
					ids: ids,
					applyStatus: status,
				}
				if (status === 3) {
					params.examineOpinion = this.reason;
				}
				const data = await this.$api.post('/adm/pricesupply/examineBatch', params)
				if (data.code === 200) {
					uni.showToast({
						title: '审核成功！'
					})
					this.waitAudit = [];
					this.getData()
					let pages = getCurrentPages()
					let prePage = pages[pages.length - 2]
					prePage.$vm.refresh();
					setTimeout(() => {
						if (this.list.length === 0) {
							uni.navigateBack()
						}
					}, 500)
				}
			},
			closeReject() {
				this.$refs.popup.close()
			},
			async confirmReject() {
				this.confirm(3)
				this.closeReject()
			},
			takeOff() {
				if (!this.waitReport.length) {
					uni.showToast({
						title: '请至少选择一个商品下架',
						icon: 'none'
					})
					return
				}
				const ids = this.waitAudit.map(item => {
					return item.id
				})
				this.$showModal({
					title: '通过报价',
					content: '本操作确认以后，选中商品将全部下架。如果不确定请选择取消。',
					confirmText: '同意',
					cancelText: '取消',
					success: async (res) => {
						if (res.confirm) {
							const data = await this.$post("/adm/product/takeBatchOff", ids)
							if (data.code === 200) {
								uni.showToast({
									title: '商品已下架！'
								})
								//this.$refs.mescrollItem[this.current].refresh();
								//this.getCount()
								this.getData()
								let pages = getCurrentPages()
								let prePage = pages[pages.length - 2]
								prePage.$vm.refresh();
								setTimeout(() => {
									if (this.list.length === 0) {
										uni.navigateBack()
									}
								}, 500)
							}
						}
					}
				})
			},
			changePrice(data) {
				console.log(data)
				this.price = '';
				this.selectItem = data;
				this.$refs.pricePopup.open('center')
			},
			close() {
				this.$refs.pricePopup.close();
			},
			async submit() {
				if (!this.price) {
					uni.showToast({
						title: '请输入价格',
						icon: 'none'
					})
					return
				}
				const data = await this.$api.post('/adm/pricesupply/setExaminePrice', {
					id: this.selectItem.currentPriceSupplyId,
					examinePrice: this.price
				})
				if (data.code === 200) {
					uni.showToast({
						title: '修改成功！'
					})
					this.$refs.pricePopup.close();
					//this.getData()
					let indexs = this.list.findIndex(item => {
						return item.currentPriceSupplyId === this.selectItem.currentPriceSupplyId
					})
					this.list[indexs].examinePrice = this.price;
					let obj = this.list[indexs];
					let price = obj.examinePrice || obj.currentPrice;
					this.list[indexs].unitPrice = (price / obj.netWeight).toFixed(2)
					if (this.form.index == 1 && obj.priceLimit && (obj.unitPrice > obj.priceLimit
							.maxPrice || obj.unitPrice < obj.priceLimit.minPrice)) {
						this.list[indexs].warning = true;
						this.list[indexs].warningText = obj.priceLimit.minPrice + '~' +
							obj.priceLimit.maxPrice;
						this.list[indexs].warningText2 = parseFloat((obj.priceLimit.minPrice * obj.netWeight).toFixed(
								2)) + '~' +
							parseFloat((obj.priceLimit.maxPrice * obj.netWeight).toFixed(
								2));
						this.list[indexs].warningType = obj.unitPrice > obj.priceLimit.maxPrice ? 'max' : 'min';
					} else {
						this.list[indexs].warning = false;
					}
				}
			}
		},
		components: {
			quotationItem
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: auto;
		padding-bottom: 140rpx;

		.top-wrapper {
			background-color: #fff;
			margin-top: 2upx;
			padding-bottom: 20rpx;

			.user-info {
				display: flex;
				align-items: center;
				font-size: 32upx;
				padding: 20upx 30upx 0 30upx;

				.name {
					font-weight: bold;
					flex: 1;
					color: #222222;
					font-size: 34upx;
				}

				.tel {
					color: #666;
				}

				.icon {
					margin-right: 5upx;
				}
			}

			.region {
				padding: 0 30upx;
				color: #888888;
				margin-top: 10upx;
			}
		}

		.item {
			margin: 20upx 20upx 0 20upx;
		}

		.bottom-wrapper {
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #ffffff;
			height: 110upx;
			display: flex;
			align-items: center;
			padding: 0 26upx;
			border-top: 1upx solid #efefef;

			.select-text {
				flex: 1;
				color: #808080;
				font-size: 32upx;
			}

			.btn {
				border: 1upx solid #D6D6D6;
				border-radius: 10upx;
				width: 180upx;
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333333;
				font-size: 30upx;

				&.primary {
					border-color: #555BFF;
					color: #ffffff;
					background-color: #555BFF;
					margin-left: 26upx;
				}
			}
		}

		.popup-wrapper {
			background-color: #ffffff;
			width: 600upx;
			height: 360upx;
			border-radius: 20upx;
			overflow: hidden;
			position: relative;

			.popup-title-wrapper {
				text-align: center;
				position: relative;
				margin: 30upx 0;

				.title {
					font-size: 36upx;
				}

				.close {
					position: absolute;
					right: 30upx;
				}
			}

			.popup-content-wrapper {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20upx 0;

				.textarea {
					width: 520upx;
					height: 140upx;
					box-sizing: border-box;
					border: 1upx solid #cecece;
					padding: 20upx;
					border-radius: 10upx;
				}
			}

			.popup-btn-wrapper {
				position: absolute;
				bottom: 0;
				height: 100upx;
				width: 100%;
				display: flex;
				align-items: center;
				border-top: 1upx solid #efefef;

				.btn {
					height: 100upx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #212121;
					flex: 1;
					font-size: 32upx;

					&:first-child {
						border-right: 1upx solid #efefef;
					}

					&.primary {
						color: #555BFF;
					}
				}
			}
		}

		.price-popup-wrapper {
			width: 600upx;
			background-color: #ffffff;
			border-radius: 20upx;
			min-height: 300upx;
			overflow: hidden;

			.title-wrapper {
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 32upx;
				font-size: 36upx;
				color: #2B2B2B;
			}

			.form-item {
				margin: 0 44upx;
				height: 100upx;
				display: flex;
				align-items: center;
				border-bottom: 2upx solid #f9f9f9;

				.label {
					font-size: 32upx;
					color: #5B5B5B;
				}

				.input-wrapper {
					flex: 1;

					.input {
						width: 100%;
						text-align: right;
					}
				}
			}

			.btn-wrapper {
				height: 150upx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 40upx;

				.btn {
					width: 260upx;
					height: 76upx;
					border-radius: 40upx;
					background-color: #555BFF;
					color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: .15s linear;

					&:active {
						background-color: #555BFF66;
					}

					&.cancel {
						box-sizing: border-box;
						background-color: #ffffff;
						border: 2upx solid #555BFF;
						margin-right: 40upx;
						color: #555BFF;

						&:active {
							background-color: #F2F4FA77;
						}
					}
				}
			}
		}
	}
</style>